<template>
    <div class="dispensing">
        <el-container>
            <el-aside width="20%">
                <navmenu :currentpage="'1'" />
            </el-aside>
            <el-container>
                <el-container>
                    <el-aside width="25%" class="line01">
                        <i class="el-icon-back" @click="back"></i>
                        <div class="patientinfo">
                            <p>姓名：&nbsp;{{patientinfo.personName}}</p>
                            <p>证件类型：&nbsp;身份证</p>
                            <p>证件号码：&nbsp;{{patientinfo.personCardId}}</p>
                            <p>性别：&nbsp;{{patientinfo.personGenderName}}</p>
                            <p>出生日期：&nbsp;{{patientinfo.personBirthDate}}</p>
                            <p>年龄：&nbsp;{{patientinfo.personAge}}</p>
                            <p>手机号码：&nbsp;{{patientinfo.personPhoneNo}}</p>
                        </div>
                    </el-aside>
                    <el-container>
                        <el-main>
                            <recordstable :patientinfo="patientinfo"/>
                        </el-main>
                    </el-container>
                </el-container>
                <el-footer class="buttonbox">
                    <!-- <el-button type="primary">修改诊断</el-button> -->
                    <el-button type="primary" @click="topath" v-if="patientinfo.consultStatus">查看处方</el-button>
                    <el-button type="primary" @click="back">完成</el-button>
                </el-footer>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    const axios = require('axios');
    import navmenu from '../components/navmenu.vue'
    import recordstable from '../components/redordstable.vue'
    export default {
        components:{
            navmenu,
            recordstable
        },
        data(){
            return{
                currentindex:0,
                patientinfo:{
                }
            }
        },
        mounted:function(){
            // console.log(this.GLOBAL.basedrug)
            this.currentindex=this.$route.params.id
            // console.log(this.currentindex)
            axios({
                method:"get",
                url:"http://121.196.150.130:8888/Demo/consult/getById?id="+this.$route.params.id,
                }).then((res)=>{
                    // console.log(res);
                    if(res.data){
                        this.patientinfo=res.data.consult
                        this.patientinfo.drugIds=this.patientinfo.drugIds.split(',')
                        this.patientinfo.photoIds=this.patientinfo.photoIds.split(',')
                        this.patientinfo.consultCreateTime=this.patientinfo.consultCreateTime.replace(".000+00:00","").replace("T"," ")
                        // this.patientinfo.drugIds.forEach(element => {
                        //     this.GLOBAL.basedrug.forEach(temp =>{
                        //         if(element==temp.drugId){
                        //             element=temp.drugName
                        //             console.log(this.patientinfo.drugIds)
                        //         }
                        //     })
                        // });
                        for(var i=0;i<this.patientinfo.drugIds.length;i++){
                            this.GLOBAL.basedrug.forEach(temp =>{
                                if(this.patientinfo.drugIds[i]==temp.drugId){
                                    this.patientinfo.drugIds[i]=temp.drugName
                                    // console.log(this.patientinfo.drugIds)
                                }
                            })
                        }
                    }
                })
        },
        methods:{
            topath(){
                this.$router.push({ path: "/dispensingdetail/"+ this.$route.params.id});
            },
            back(){
                this.$router.go(-1)
            }
        }
    }
</script>

<style scoped>
    .patientinfo{
        /* text-align: center; */
        margin-left: 15%;
        position: relative;
        top: 35%; /*偏移*/
        transform: translateY(-50%);
        font-size: 20px;
    }
    .buttonbox{
        display: flex;
        justify-content: flex-end;
        border-top:1px solid #d4d4d4;
        box-shadow: #e4e4e4 0 -5px 5px 0;
    }
    .el-button{
        position: relative;
        top: 50%; /*偏移*/
        transform: translateY(-50%);
        height: 40px;
    }
    .line01{
        border-right:1px solid #d4d4d4;
        box-shadow: #e4e4e4 5px 0 5px 0;
    }
    .el-icon-back{
        margin-top: 20px;
        margin-left: 20px;
        font-size: 32px;
        position: absolute;
    }
</style>